
<style>
    label input[type=checkbox]{cursor: pointer;}
</style>

<!-- Content Header (Page header) -->
<section class="content-header">
    <h1>
        老师动态
        <small>列表</small>
    </h1>
</section>

<!-- Main content -->
<section class="content" id="dynamic-app">

    <div class="row">
        <div class="col-md-6">
            <a class="btn btn-default" @click="getList">刷新</a>
        </div>
    </div>


    <div class="row">
        <div class="col-md-12">
            <table class="table table-responsive table-striped table-bordered">
                <thead>
                <tr>
                    <th><label><input type="checkbox" :checked="selectAll" @click="handleSelectAll"><strong>ID</strong></label></th>
                    <th>标题</th>
                    <th>老师</th>
                    <th>封面</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="item in list">
                    <td>
                        <label><input type="checkbox" :value="item.df_id" v-model="selectList"> <strong>{{item.df_id}}</strong></label>
                    </td>
                    <td>{{item.object.item_title}}</td>
                    <td>{{item.object.item_teacher.teacher_name}}/{{item.object.item_teacher.teacher_degree}}</td>
                    <td>
                        <a target="_blank" :href="item.object.item_cover">
                            <img :src="item.object.item_cover ? item.object.item_cover+'?x-oss-process=image/resize,h_64,w_100' : null ">
                        </a>
                    </td>
                    <td>
                        <a class="btn btn-danger btn-xs" @click="del(item.df_id)"><i class="fa fa-trash-o"></i></a>
                    </td>
                </tr>
                </tbody>
                <tfoot>
                <tr>
                    <td colspan="2">
                        <a class="btn btn-danger" @click="delAll">删除选择</a>
                    </td>
                    <td colspan="2">
                        <el-pagination background @current-change="handleCurrentChange" :current-page.sync="listQuery.page"
                                       :page-size="listQuery.rows" layout="total, prev, pager, next, jumper" :total="listTotal">
                        </el-pagination>
                    </td>
                </tr>
                </tfoot>
            </table>
        </div>
    </div>


</section>
<!-- /.content -->

<script>
    var dynamic_app = new Vue({
        el: '#dynamic-app',
        data: {
            list: [],
            listQuery: {rows: 10, page: 1},
            listTotal: 0,
            listLoading: false,
            selectList: []
        },
        mounted: function () {
            this.getList()
        },
        methods: {
            getList: function () {
                var self = this;
                if (self.listLoading) return;
                self.listLoading = true;
                ajax({
                    uri: '/dynamic',
                    type: 'GET',
                    data: self.listQuery,
                    success: function (response) {
                        var resp = response.data;
                        var list = resp.data;
                        list.forEach(function (a, i) {
                            a.object = JSON.parse(a.df_value)
                        });
                        self.list = list;
                        self.listQuery.page = resp.current_page;
                        self.listTotal = resp.total;
                        self.listLoading = false;
                    }
                })
            },
            del: function (id, query = true) {
                var self = this;
                if (query) {
                    if (confirm('删除后果自负？！？！继续？') === false) return;
                }
                ajax({
                    uri: '/dynamic',
                    type: 'DELETE',
                    data: {id: id},
                    success: function (resp) {
                        console.log(resp);
                        self.getList();
                    }
                })
            },
            delAll: function () {
                var self = this;
                if (confirm('删除后果自负？！？！继续？') === false) return;
                self.selectList.forEach(function (a, i) {
                    self.del(a, false);
                })
            },
            handleSelectAll: function (event) {
                var btn = event.target;
                var self = this;
                self.selectList = [];
                if (btn.checked) {
                    self.list.forEach(function (a, i) {
                        self.selectList.push(a.df_id);
                    })
                }
            },
            handleCurrentChange: function (val) {
                this.listQuery.page = val;
                this.getList()
            }
        },
        computed: {
            selectAll: function () {
                var self = this;
                return (self.selectList.length > 0) && (self.selectList.length === self.list.length);
            }
        }
    })
</script>